import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

type AlertAnswerProps = {
  open: boolean;
  cancel: () => void;
  accept: () => void;
  text?: string;
};

export const AlertAnswer = ({
  open,
  cancel,
  accept,
  text = "Вы действительно хотите удалить?",
}: AlertAnswerProps) => {
  const handleClick = (
    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
    callback: () => void,
  ) => {
    e.stopPropagation();
    callback();
  };

  const handleEnterPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.key === 'Enter') accept();
    if (event.key === 'Escape') cancel();
  };


  return (
    <div className="z-[9999]" onClick={(e) => e.stopPropagation()}>
      <AlertDialog open={open} >
        <AlertDialogContent onKeyDown={handleEnterPress} >
          <AlertDialogHeader>
            <AlertDialogTitle className="text-center">{text}</AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogFooter className="gap-4 lg:justify-center">
            <AlertDialogCancel onClick={(e) => handleClick(e, cancel)}>
              Нет
            </AlertDialogCancel>
            {/* <AlertDialogAction className="bg-white text-black border hover:bg-slate-50" onClick={(e) => handleClick(e, cancel)} >
              Нет
            </AlertDialogAction> */}
            <AlertDialogAction onClick={(e) => handleClick(e, accept)}>
              Да
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};
